<script setup>
import { ref } from "vue";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import { getDynamicListService, deleteDynamic } from "@/api/dynamic.js";

const tableData = ref([
  // {
  //   userId: 1,
  //   userName: "admin",
  //   avatar:
  //     "http://img.alicdn.com/sns_logo/i4/2729790463/O1CN01bqKiZZ1FI6Ky8Y2W4_!!2729790463-2-userheaderimgshow.png",
  //     dynamicId: 323,
  //   title: "测试",
  //   content: "管理员测试",
  //   publishTime: "2024-05-30T03:34:28.000+00:00",
  //   likeNum: 10,
  // },
  // {
  //   userId: 2,
  //   userName: "testuser",
  //   avatar:
  //     "http://img.alicdn.com/sns_logo/i3/2729790463/O1CN01f8yNuk1FI6L0Vumnw_!!2729790463-2-userheaderimgshow.png",
  //   dynamicId: 422,
  //   title: "发癫",
  //   content: "禁止在412发癫",
  //   publishTime: "2024-05-30T03:34:05.000+00:00",
  //   likeNum: 0,
  // },
]);

const query_argument = ref({
  dynamicId: '',
  userId: "",
  title: "",
});

const pageNum = ref(1); //当前页
const total = ref(20); //总条数
const pageSize = ref(3); //每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size;
  pageNum.value = 1;
  getDynamics();
};
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num;
  getDynamics();
};

// 搜索逻辑 => 按照最新的条件，重新检索，从第一页开始展示
const onSearch = () => {
  pageNum.value = 1; // 重置页面
  getDynamics();
};

// 重置逻辑 => 将筛选条件清空，重新检索，从第一页开始展示
const onReset = () => {
  pageNum.value = 1; // 重置页面
  query_argument.value.userId = "";
  query_argument.value.dynamicId = "";
  query_argument.value.title = "";
  getDynamics();
};

const getDynamics = async () => {
  const res = await getDynamicListService(
    pageNum.value,
    pageSize.value,
    query_argument.value.userId,
    query_argument.value.dynamicId,
    query_argument.value.title
  );
  tableData.value=res.data.list
  total.value = res.data.total;
  console.log(res);
};
getDynamics()


const handleDelete = (dynamicId) => {
  ElMessageBox.confirm("确认删除?", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
        const res=await  deleteDynamic(dynamicId)
        console.log(res)
        getDynamics()
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {});
};

const dialogVisible=ref(false)
const title=ref('')
const text=ref('')
const opendialog=(tit,con)=>{
  dialogVisible.value=true
  title.value=tit
  text.value=con

}
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>动态管理</span>
      </div>
    </template>
    <el-form inline>
      <el-form-item label="id:">
        <el-input
          v-model="query_argument.dynamicId"
          placeholder="请输入动态id"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户id:">
        <el-input
          v-model="query_argument.userId"
          placeholder="请输入用户id"
        ></el-input>
      </el-form-item>
      

      <el-form-item label="标题:">
        <el-input
          v-model="query_argument.title"
          placeholder="请输入动态标题"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="onSearch" type="primary">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%; margin-top: 50px">
      <el-table-column label="id" width="100" prop="dynamicId"> </el-table-column>
      <el-table-column label="头像" prop="avatar">
        <template #default="scope">
          <img width="38px" v-if="scope.row.avatar!='default.jpg'" :src="scope.row.avatar">
              <img v-else width="38px" src="@/assets/boy.jpg" />
        </template>
      </el-table-column>

      <el-table-column label="昵称" prop="userName"></el-table-column>
      <el-table-column label="标题" prop="title"></el-table-column>
      
      <el-table-column label="时间" prop="publishTime"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            @click="opendialog(scope.row.title,scope.row.content)"
          >
            查看
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete( scope.row.dynamicId)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty v-if="tableData.length==0" description="空空如也" />
    </template>
    </el-table>
    <el-config-provider :locale="zhCn">
      <el-pagination
        class="pag"
        v-if="tableData.length > 0"
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[2,3,5]"
        layout="jumper, total, sizes, prev, pager, next"
        background
        :total="total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
        style="margin-top: 20px; justify-content: left"
      />
    </el-config-provider>
  </el-card>

  <el-dialog v-model="dialogVisible" :title="title" width="800">
    <el-text >
      <span v-html="text"></span>
   <!-- {{text}} -->
  </el-text>
  </el-dialog>
</template>

<style scoped>
.page-container {
  margin-top: 50px;
  min-height: 100%;
  box-sizing: border-box;
  position: relative;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.pag {
  position: absolute;
  bottom: 0;
  margin-bottom: 20px;
}

</style>
